import React, { useState, useEffect, useCallback, ReactElement } from "react";
import { Radio, InputNumber, Select } from "antd";
import { radioStyle, setOptions } from "../common";
const RadioGroup = Radio.Group;
const options = setOptions(60);

interface Props {
    value: string
    onChange: (e: string) => void
}

export default function MinutePane(props: Props): ReactElement {
    const { value, onChange } = props;
    const [currentRadio, setCurrentRadio] = useState(1);
    const [from, setFrom] = useState(0);
    const [to, setTo] = useState(10);
    const [offsetFrom, setOffsetFrom] = useState(0);
    const [offset, setOffset] = useState(1);
    const [selected, setSelected] = useState(["0"]);
    let isFirstRender = false
    useEffect(() => { isFirstRender = true }, [])

    useEffect(() => {
        if (value === "*") {
            setCurrentRadio(1);
        } else if (value === "?") {
            setCurrentRadio(5);
        } else if (value.indexOf("-") > -1) {
            setCurrentRadio(2);
            const [defaultFrom, defaultTo] = value.split("-");
            setFrom(parseInt(defaultFrom, 10));
            setTo(parseInt(defaultTo, 10));
        } else if (value.indexOf("/") > -1) {
            setCurrentRadio(3);
            const [defaultOffsetFrom, defaultOffset] = value.split("/");
            setOffsetFrom(parseInt(defaultOffsetFrom, 10));
            setOffset(parseInt(defaultOffset, 10));
        } else {
            setCurrentRadio(4);
            setSelected(value ? value.split(",") : ["0"]);
        }
    }, [value]);

    useEffect(() => {
        //首次渲染不能走这块 否则会死循环
        if (!isFirstRender) {
            switch (currentRadio) {
                case 1:
                    onChange("*");
                    break;
                case 2:
                    onChange(`${from}-${to}`);
                    break;
                case 3:
                    onChange(`${offsetFrom}/${offset}`);
                    break;
                case 4:
                    onChange(selected.join(","));
                    break;
                case 5:
                    onChange("?");
                    break;
                default:
                    break;
            }
        }
    }, [currentRadio, from, to, offsetFrom, offset, selected]);


    const onChangeRadio = useCallback((e: any) => {
        setCurrentRadio(e.target.value);
    }, []);

    const onChangeFrom = useCallback((v: any) => {
        setFrom(v || 0);
    }, []);

    const onChangeTo = useCallback((v: any) => {
        setTo(v || 0);
    }, []);

    const onChangeOffsetFrom = useCallback((v: any) => {
        setOffsetFrom(v || 0);
    }, []);

    const onChangeOffset = useCallback((v: any) => {
        setOffset(v || 0);
    }, []);

    const onChangeSelected = useCallback((v: []) => {
        v = v.sort((a: number, b: number) => a - b)
        setSelected(v.length !== 0 ? v : ["0"]);
    }, []);

    const aTobA = <InputNumber disabled={currentRadio !== 2} min={0} max={59} value={from} size="small" onChange={onChangeFrom} style={{ width: 100 }} />;
    const aTobB = <InputNumber disabled={currentRadio !== 2} min={0} max={59} value={to} size="small" onChange={onChangeTo} style={{ width: 100 }} />;

    const aStartTobA = <InputNumber disabled={currentRadio !== 3} min={0} max={59} value={offsetFrom} size="small" onChange={onChangeOffsetFrom} style={{ width: 100 }} />;
    const aStartTobB = <InputNumber disabled={currentRadio !== 3} min={0} max={59} value={offset} size="small" onChange={onChangeOffset} style={{ width: 100 }} />;

    return (
        <RadioGroup name="radiogroup" value={currentRadio} onChange={onChangeRadio}>
            <Radio style={radioStyle} value={1}>
                每一分钟
            </Radio>

            <Radio style={radioStyle} value={5}>
                不指定
            </Radio>

            <Radio style={radioStyle} value={2}>
                从&nbsp;{aTobA}&nbsp;-&nbsp;{aTobB}&nbsp;分，每分执行一次
            </Radio>

            <Radio style={radioStyle} value={3}>
                从&nbsp;{aStartTobA}&nbsp;分开始， 每&nbsp; {aStartTobB}&nbsp;分执行一次
            </Radio>

            <div style={{ display: "flex", alignItems: "center" }}>
                <Radio style={radioStyle} value={4}>
                    具体分钟(可多选)
                </Radio>

                <Select
                    allowClear
                    showSearch={false}
                    size="small"
                    disabled={currentRadio != 4}
                    mode={"multiple"}
                    maxTagCount={"responsive"}
                    options={options}
                    placeholder={"请选择具体时间"}
                    style={{ width: "200px" }}
                    onChange={(e) => onChangeSelected(e)}
                >
                </Select>
            </div>
        </RadioGroup>
    );
}